import createElem from './createElem'
import updataChildren from './updateChildren'

import judge from './judge'

/**
 * @description 插入data
 * @param {Element} node 
 * @param {Object} data 
 */
function addData(node, data) {
  const props = data.props
  if (props) {
    for (let key in props) {
      node.setAttribute(key, props[key])
    }
  }
  const classlist = data.classlist
  if (classlist) {
    for (let key in classlist) {
      if (classlist[key]) {
        node.classList.add(key)
      }
    }
  }
}

export default function (oldVnode, newVnode) {
  if (oldVnode == newVnode) {
    return;
  }

  if (judge.isTextVnode(newVnode)){
    // 新的节点有text属性
    // 补充：还应该把data加上。
    if (newVnode.text != oldVnode.text) {
      oldVnode.elm.innerText = newVnode.text
      addData(oldVnode.elm, newVnode.data)
    }
    // 自加
    newVnode.elm = oldVnode.elm
  } else {
    // 新的节点没有 text 属性，是children
    // 旧的节点有没有children？
    if (!judge.hasChildren(oldVnode)) {
      // 没有children，那么开始替换旧节点的内部
      oldVnode.elm.innerHTML = ''
      let subdom
      for (let i = 0, len = newVnode.children.length; i < len; ++i) {
        subdom = createElem(newVnode.children[i])
        oldVnode.elm.appendChild(subdom)
      }
      
      // 自加
      newVnode.elm = oldVnode.elm
      addData(newVnode.elm, newVnode.data)

    } else {
      // console.log('都有children');
      // 到这儿，说明新旧节点都有 children
      updataChildren(oldVnode.elm, oldVnode.children, newVnode.children)
    }
  }
}
